<!--柱状图  -->
<template>
  <div class="bar-chart" ref="bar"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  components: {},
  name: 'BarChart',
  props: {
    chartData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.initChart();
        });
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.bar);
      this.setOptions(this.chartData);
    },
    /**
     * setOptions需要接参数的
     */
    setOptions(val) {
      var _that = this;
      function sum(arr) {
        return eval(arr.join('+'));
      }
      if (
        val[1].value.every(item => {
          return item == 0;
        }) &&
        val[0].value.every(item => {
          return item == 0;
        })
      ) {
        this.chart.setOption({
          title: {
            show: true,
            text: '暂无数据',
            left: 'center',
            top: 'center',
          },
        });
      } else {
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            selectedMode: false,
            itemGap: 70,
            bottom: '1%',
            itemWidth: 24,
            itemHeight: 14,
            textStyle: {
              color: '#323233',
              fontWeight: 400,
              fontSize: 14,
              lineHeight: 20,
              height: 20,
              fontFamily: 'PingFangSC-Regular, PingFang SC',
            },
            formatter: function (name) {
              let target;

              for (let i = 0; i < val.length; i++) {
                console.log(val, 'val');
                if (val[i].name === name) {
                  target = sum(val[i].value);
                }
              }
              const arr = [`${name}`, `${target}`];
              return arr.join('  ');
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '16%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            offset: 8,
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: {
              fontWeight: 400,
              fontSize: 14,
              fontFamily: 'PingFangSC-Regular, PingFang SC',
            },
            data: [
              '一月',
              '二月',
              '三月',
              '四月',
              '五月',
              '六月',
              '七月',
              '八月',
              '九月',
              '十月',
              '十一月',
              '十二月',
            ],
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
          },
          series: [
            {
              z: 20,
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#27B1B1',
                },
              },
              name: val[0].name,
              silent: true,
              barGap: '-100%',
              emphasis: {
                focus: 'series',
              },
              data: val[0].value,
            },
            {
              name: val[1].name,
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#FACC14',
                },
              },
              stack: 'total',
              barGap: '-100%',
              emphasis: {
                focus: 'series',
              },
              z: 10,
              data: val[1].value,
            },
          ],
        });
      }

      window.addEventListener('resize', () => {
        _that.chart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.bar-chart {
  width: 100%;
  height: 100%;
}
</style>
